<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'

interface Props {
  data?: Record<string, any> | never | null
}

const { data = null } = defineProps<Props>()

const fullscreenLoading = ref(false)

const formRef = ref()

const form = reactive<any>({
  name: '',
  price: '',
  num: '',
  sum: '',
  remark: '',
})

const rules = reactive<any>({
  name: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur',
    },
  ],
  price: [
    {
      required: true,
      message: '请输入价格',
      trigger: 'blur',
    },
  ],
  num: [
    {
      required: true,
      message: '请输入数量',
      trigger: 'blur',
    },
  ],
  remark: [
    {
      required: true,
      message: '请输入备注',
      trigger: 'blur',
    },
  ],
})

watch(
  () => form.num,
  () => {
    setSum()
  },
)

watch(
  () => form.price,
  () => {
    setSum()
  },
)

const setSum = () => {
  form.sum = form.num * form.price
}

const submitForm = () => {
  return new Promise<any>((resolve: any) => {
    formRef.value.validate((valid: any) => {
      let res: any = null
      if (valid) {
        res = form
      }
      resolve(res)
    })
  })
}

defineExpose({
  submitForm,
})

const initForm = () => {
  if (data) {
    Object.keys(data).forEach((key: string) => {
      form[key] = data![key]
    })
  }
}

onMounted(() => {
  initForm()
})
</script>

<template>
  <div class="buy-form-wrapper" v-loading.fullscreen="fullscreenLoading">
    <el-form ref="formRef" :model="form" :rules="rules">
      <div class="username-container form-input-container">
        <div class="label">名称</div>
        <div class="input-container">
          <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" :disabled="true" />
          </el-form-item>
        </div>
      </div>
      <div class="password-container form-input-container">
        <div class="label">单价</div>
        <div class="input-container">
          <el-form-item prop="price">
            <el-input v-model="form.price" placeholder="请输入单价" :disabled="true" />
          </el-form-item>
        </div>
      </div>
      <div class="code-container form-input-container">
        <div class="label">数量 (一次最多10个)</div>
        <div class="input-container">
          <el-form-item prop="num">
            <el-input-number v-model="form.num" :min="1" :max="10" :disabled="true" />
          </el-form-item>
        </div>
      </div>
      <div class="code-container form-input-container">
        <div class="label">总价</div>
        <div class="input-container">
          <el-form-item prop="sum">
            <el-input v-model="form.sum" placeholder="请输入总价" :disabled="true" />
          </el-form-item>
        </div>
      </div>
      <div class="code-container form-input-container">
        <div class="label">发货备注</div>
        <div class="input-container">
          <el-form-item prop="remark">
            <el-input
              ref="textareaRef"
              v-model="form.remark"
              type="textarea"
              :rows="2"
              :autosize="{ minRows: 2, maxRows: 6 }"
              resize="none"
              maxlength="1000"
              placeholder="发货备注"
            />
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.buy-form-wrapper {
  @include rect(auto, auto);
  @include flex(column, center, center);

  .operation-container {
    width: 100%;
    @include flex(row, space-between, center);
    margin-top: 16px;
    pointer-events: none;

    .register-container {
      font-weight: 400;
      font-size: 16px;
      text-decoration: underline;

      span {
        color: var(--theme-color);
      }
    }

    .register-container {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 16px;
      color: rgba(144, 147, 154, 1);
      span {
        text-decoration: underline;
        cursor: pointer;
        pointer-events: auto;
      }
    }
    .forget-container {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 16px;
      color: rgba(144, 147, 154, 1);
      span {
        cursor: pointer;
        pointer-events: auto;
      }
    }
    .forget-container:hover {
      span {
        text-decoration: underline;
      }
    }
    .register-container + .forget-container {
      margin-left: 140px;
    }
  }
  .submit-container {
    --el-border-radius-round: 30px;
    .el-button {
      height: 60px;
      width: 418px;
    }
    .submit-text {
      font-family: 'PingFangSC-Medium';
      font-weight: 500;
      font-size: 18px;
      color: rgba(255, 255, 255, 1);
    }
  }
  .form-input-container {
    @include flex(column, flex-start, flex-start);
    .label {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 14px;
      pointer-events: none;
    }
    .input-container {
      width: 365px;
      --el-component-size: 45px;
      --el-border-radius-base: 8px;
      :deep(.el-input__wrapper) {
        padding-left: 15px;
        padding-right: 20px;
      }
      :deep(.el-form-item__error) {
        padding-left: 0px;
        padding-top: 10px;
        font-size: 14px;
      }
    }
    .label + .input-container {
      margin-top: 10px;
    }
  }
  .form-input-container + .form-input-container {
    margin-top: 20px;
  }
  .protocol-container {
    @include flex(row, flex-start, center);
    margin-bottom: 22px;
    .text-container {
      @include flex(row, flex-start, center);
      margin-left: 7px;
      .tip {
        font-family: 'PingFangSC-Bold';
        font-size: 18px;
        font-weight: bold;
        color: #90939a;
      }
      .protocol-text {
        font-family: 'PingFangSC-Bold';
        font-size: 18px;
        font-weight: bold;
        color: var(--theme-color);
        cursor: pointer;
      }
    }
  }

  .el-input.is-disabled {
    .el-input__inner {
      -webkit-text-fill-color: #333;
    }
  }
}
</style>
